<%@page import="com.teach.entity.Shops"%>
<%@page import="java.util.List"%>
<%@ page language="java" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
<head>
<c:set var="title" value="酒店预定" scope="request" />
<jsp:include page="/head.jsp" />
</head>
<body>
	<c:import url="/news-class.do?mb=header" />
	<!-- 搜索栏 -->
	<nav  class="hotelnav navbar navbar-default">
      <div class="container-fluid">
        <div class="navbar-header">
          <a id="hotel-navbar-brand" class="navbar-brand " href="#">七八网●酒店</a>
        </div>
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-2">
          <form style="width:80%;" class="navbar-form navbar-left" action="hotel-list.html" method="get">
            <div style="width:90%;" class="form-group">
              <input style="width:95%; margin:0;"   type="text" class="form-control" name="searchHotel" />
            </div>
            <button type="submit" class="btn btn-default">查询</button>
          </form>
        </div>
      </div>
    </nav>
	<div class="showBody">
		 <!-- 左侧酒店展示栏 -->
		<div class="showBody-Left">
			 <div class="hotleLeftShow">
		    	<div class="row">
		    	<div style= "width:90%; margin:auto; text-align: center; border:1px rgb(200,200,200) solid;"><h3>甄选品牌</h3></div>
		    	<c:forEach items="${list1}" var="shop" >
		      <div class="">
		      <div class="modal fade bs-example-modal-lg${shop.id}" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" style="display: none;">
					<div class="modal-dialog modal-lg" role="document">
						<div class="modal-content">
							<img data-src="holder.js/100%x180" alt="100%x180" style="height: 100%; width: 100%; display: block;" src="${shop.img[0] }" data-holder-rendered="true">
						</div>
					</div>
				</div>
		        <div class="thumbnail">
		          <a style="padding:none; background-image: linear-gradient(white, white, white); border-color:white;" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg${shop.id}">
		          	<img data-src="holder.js/100%x200" alt="100%x200" src="${shop.img[0] }" data-holder-rendered="true" style="height: 200px; background-color:white; display: block;">
		          </a>
		          <div class="caption">		          
		            <h3>${shop.shopName}</h3>
		            <p style="display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;">${shop.shopMemo }</p>
		            <p><a href="hotel-info.html?id=${shop.id}" class="btn btn-primary" role="button">进入店铺</a> </p>
		          </div>       
		        </div>
		      </div>
			</c:forEach>	     
		    </div>
    </div>
		</div>
		 <!-- 右侧核心栏 -->
		<div class="showBody-right">
			<!-- 轮播图片栏 -->
			<div class="hotleLunbo">
				<div id="carousel-example-captions" class="carousel slide" data-ride="carousel">
			      <ol class="carousel-indicators">
			        <li data-target="#carousel-example-captions" data-slide-to="0" class="active"></li>
			        <li data-target="#carousel-example-captions" data-slide-to="1" class=""></li>
			        <li data-target="#carousel-example-captions" data-slide-to="2" class=""></li>
			      </ol>
			      <div class="carousel-inner" role="listbox">
			      <%Boolean flag = true; %>
			    	<c:forEach items="${list2}" var="shop" >
			    		<%if(flag){ %>
				        	<div class="item active">
				        <%
				        flag = false;
			    		}else{ %>
				        	<div class="item">
				        <%} %>
				        <a href="hotel-info.html?id=${shop.id}">
					          <img style="margin:auto;height:550px;width: 700px;" data-src="holder.js/900x500/auto/#777:#777" alt="900x500"  src="${shop.img[0] }"  data-holder-rendered="true"><!-- ${shop.img[0] } -->
					          <div class="carousel-caption">
					            <h3>${shop.shopName }</h3>
					            <p style="display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;">${shop.shopMemo }</p>
					          </div>
					     </a>
					     </div>
					</c:forEach>   
			      </div>
			      <a class="left carousel-control" href="#carousel-example-captions" role="button" data-slide="prev">
			        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
			        <span class="sr-only">Previous</span>
			      </a>
			      <a class="right carousel-control" href="#carousel-example-captions" role="button" data-slide="next">
			        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
			        <span class="sr-only">Next</span>
			      </a>
			    </div>
			</div>
			<!-- 地图栏 -->
			<div class="hotleMap">
				<div class="col-md-12">
					<div class="main-title">
						<div>新 闻 文 章</div>
					</div>
						<c:import url="/news-index.do?newsClassId=2&rowMax=5" />
				</div>
			</div>
			<!-- 中间展示栏 -->
			<div class="hotleshow">
				<div class="panel panel-default">
			      <div class="panel-heading">热门酒店</div>
			      <div class="panel-body">
			      <!-- hotleshow-lan：横向栏 -->
			    <c:forEach items="${list3}" var="shop" >
			        <div class="hotleshow-lan">
				      <div class="modal fade bs-example-modal-lg${shop.id}" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" style="display: none;">
							<div class="modal-dialog modal-lg" role="document">
								<div class="modal-content">
									<img data-src="holder.js/100%x180" alt="100%x180" style="height: 100%; width: 100%; display: block;" src="${shop.img[0] }" data-holder-rendered="true">
								</div>
							</div>
						</div>
				        <div class="thumbnail">
				          <a style="padding:none; background-image: linear-gradient(white, white, white); border-color:white;" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg${shop.id}">
				          	<img data-src="holder.js/100%x200" alt="100%x200" src="${shop.img[0] }" data-holder-rendered="true" style="height: 200px; width: 100%; background-color:white; display: block;">
				          </a>
				          <div class="caption">
				            <h3>${shop.shopName }</h3>
				            <p style="display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;">${shop.shopMemo }</p>
				            <p><a href="hotel-info.html?id=${shop.id}" style="float: right;" class="btn btn-primary" role="button">查看房间</a> </p>
				          </div>
				        </div>
				      </div>
					</c:forEach> 
			      </div>
			    </div>
			</div>
		</div>
	</div>
	<jsp:include page="/footer.jsp"/>
</body>
</html>
